import React, { useMemo } from 'react';
import { useLocation } from 'react-router-dom';
import ClassNames from 'classnames';
import { useRequest } from 'ahooks';
import { getUserLevel } from '@/service/live';
import Iconfont from '@/components/Iconfont';
import Loading from '@/components/Loading';
import { getRequestUrlParams } from '@/common/utils';

import styles from './style.scss';

const UserLevelPageMain = ({ token }) => {
  const { data, loading, error } = useRequest(() => getUserLevel({
    headers: {
      Authorization: token,
    },
  }));

  const onBackHandle = () => global.history?.back();

  const levelList = useMemo(() => data?.levelList || [], [data]);
  const currentLevelId = useMemo(() => data?.currentLevelId || 0, [data]);

  const levelPanel = useMemo(() => {
    const showNumber = 8;

    return [...levelList].splice(Math.min(currentLevelId, levelList.length - showNumber), showNumber);
  }, [currentLevelId, levelList]);

  if (loading) {
    return (
      <Loading />
    );
  }
  if (error) {
    return (
      <div style={{ textAlign: 'center', padding: '40px 0' }}>{error.error || error.message}</div>
    );
  }
  return (
    <main className={styles.container}>
      <header className={styles.header}>
        <Iconfont className={styles.icon} name="arrow-left" tag="div" onClick={onBackHandle} />
        <div className={styles.headTitle}>等级规则</div>
        <div className={styles.icon} />
      </header>
      <div className={styles.levelList}>
        <div className={styles.levelLine} />
        {levelPanel.map((row, index) => (
          <div className={ClassNames(styles.levelItem, { [styles.isActive]: row.level === data?.level })} key={index}>
            <div className={styles.levelText}>{`V${row.level}`}</div>
            <div className={styles.levelDot} />
          </div>
        ))}
      </div>
      <div className={styles.curLevel}>{`当前等级 V${data?.level}`}</div>
      <div className={styles.wrapper}>
        <div className={styles.textTitle}>什么是等级与头衔？</div>
        <div
          className={styles.textContent}
        >
          用户在鑫球直播平台上有身份标识，体现了用户在鑫球直播的尊贵权限等级。随着用户使用时间的增长，以及完成核心任务，等级会随之提升，头衔也会随之改变，获取更大平台用户的权益。
        </div>
        <div className={styles.textTitle}>等级、头衔与成长值的关系</div>
        <div className={styles.levelTable}>
          <div className={ClassNames(styles.tableRow, styles.isHeader)}>
            <div className={styles.tableCell}>徽章</div>
            <div className={ClassNames(styles.tableCell, styles.isLevel)}>等级</div>
            <div className={ClassNames(styles.tableCell, styles.isExp)}>
              <div className={styles.cellLevelText}>成长范围</div>
            </div>
          </div>
          {levelList.map((row, index) => (
            <div className={styles.tableRow} key={index}>
              <div className={styles.tableCell}>
                <img
                  className={styles.levelImage}
                  src={row.img}
                />
              </div>
              <div className={ClassNames(styles.tableCell, styles.isLevel)}>{row.levelName}</div>
              <div className={ClassNames(styles.tableCell, styles.isExp)}>
                <div className={styles.cellLevelText}>{`${row.minIntegral}~${row.maxIntegral}`}</div>
              </div>
            </div>
          ))}
        </div>
        <div className={styles.tipsText}>如何获得成长值与金块</div>
        <div className={styles.textTitle}>每日登陆</div>
        <div
          className={styles.textContent}
        >
          每天登录鑫球App，即可获得登录金块。每次登录1次即可获得+3金块，成长值+5。每日上限+1金块，+5成长值
        </div>
        <div className={styles.textTitle}>每日签到</div>
        <div
          className={styles.textContent}
        >
          每天进入鑫球直播App签到，即可获得对应签到的金块与分值，随着头衔的提升连续签到的金块与分值也会增加，连续3天、5天与7天，均可获得额外金块与成长值奖励
        </div>
        <div className={styles.textTitle}>关注比赛</div>
        <div
          className={styles.textContent}
        >
          每天关注至少一场比赛,最大奖励关注3场比赛，获得奖励分别为+5金块与+5成长值、+8金块与+10成长值、+10金块与+20成长值，根据完成的次数赠送奖励
        </div>
        <div className={styles.textTitle}>精彩直播</div>
        <div
          className={styles.textContent}
        >
          用户每天进入App直播页观看直播间比赛，每日至少进入3个不同的直播间观看，进入直播间就算一次，一次性派送固定值，每日上限+5金块，+10成长值
        </div>
        <div className={styles.textTitle}>互动达人</div>
        <div
          className={styles.textContent}
        >
          每日在直播间发送弹幕互动，弹幕发送成功一次即可，一次性派送固定值，每日上限+3金块，+10成长值
        </div>
        <div className={styles.textTitle}>邀请入席</div>
        <div
          className={styles.textContent}
        >
          每日通过在本App内所有分享入口分享至任何其他第三方软件，每日两次，完成一次赠送一次，获得奖励分别为+5金块与+12成长值、+10金块与23成长值，根据完成的次数赠送奖励
        </div>
        <div className={styles.textTitle}>球在人在</div>
        <div
          className={styles.textContent}
        >
          用户在一个直播间连续观看时间超过15分钟，每日最高完成三次本任务，完成一次赠送一次，获得奖励分别为+8金块与15成长值、+10金块与20成长值、+18金块与35成长值，根据完成的次数赠送奖励
        </div>
        <div className={styles.textTitle}>乐在其中</div>
        <div
          className={styles.textContent}
        >
          每天进入主播直播间，并花费金块兑换礼物赠送主播，即可获得+6金块。成长值无上限，1金块根据用户等级获取对应成长值
        </div>
      </div>
    </main>
  );
};

const UserLevelPage = () => {
  const { search } = useLocation();

  return useMemo(() => {
    const { token } = getRequestUrlParams(search);
    if (token) {
      return (
        <UserLevelPageMain token={token} />
      );
    }

    return (
      <div style={{ textAlign: 'center', padding: '40px 0' }}>token 为空</div>
    );
  }, [search]);
};

export default UserLevelPage;
